import React, { Component, createContext } from "react";

// context上下文相当于是vue的依赖注入
// 用于将父组件的值直接传递给它的子孙组件

// context是具有响应式的

// createContext在组件外面直接调用，会返回一个对象
const context = createContext();
//       提供者    消费者
const { Provider, Consumer } = context;

class Child2 extends Component {
  state = {};
  render() {
    // Consumer用在需要接受的那个子组件的里面
    // Consumer组件里面可以写一个函数，函数可以接受一个value属性
    // value的值就是Provider标签上面传递的value属性
    return (
      <>
        <span>child2组件</span>
        <Consumer>
          {(value) => {
            return (
              <span>
                {value.name} - {value.count}
              </span>
            );
          }}
        </Consumer>
      </>
    );
  }
}

class Child1 extends Component {
  state = {};
  render() {
    return (
      <>
        <div>child1组件</div>
        <Child2 />
      </>
    );
  }
}

class App extends Component {
  state = {
    count: 5,
    name: "tom",
  };

  fn = () => {
    this.setState({
      name: "jerry",
    });
  };

  render() {
    return (
      // Provider组件要套在需要传递数据的那个父元素的外面
      // 还需要一个value属性
      <Provider
        value={{
          count: this.state.count,
          name: this.state.name,
        }}
      >
        <h2>
          context上下文 - <button onClick={this.fn}>btn</button>
        </h2>
        <Child1 />
      </Provider>
    );
  }
}

export default App;
